<template>
  <div class="app-container">
    <el-form label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用工单号" prop="taskNumber">
            <el-input v-model="this.taskNumber" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用工时间" prop="needTime">
            <el-input v-model="this.needTime" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <template v-for="item in operationNeedList">
            <h5>班次 {{item.timeShiftName}}</h5>
            <PostTable :tableData="item.timeShiftValue" :disabled="true"></PostTable>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="this.remark" :disabled="true" type="textarea" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <h5>变更记录</h5>
        <p v-for="(item,i) in taskChangePojos">{{item.createTime}} {{item.changData}}</p>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { viewOperationNeed } from "@/api/job/operationNeed/operationNeed";
  import { PostTable } from "../components"
  export default {
    components:{ PostTable },
    name: "attendanceGroup",
    created() {
      this.viewOperationNeed();
    },
    data() {
      return {
        // 表格数据
        operationNeedList: [],
        taskChangePojos: [],
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
        operationNeedId: this.$route.query.operationNeedId,
        taskNumber:undefined,
        needTime:undefined,
        remark:undefined,
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },

    methods: {
      viewOperationNeed(){
        viewOperationNeed(this.operationNeedId).then(es=>{
          this.operationNeedList = es.data.timeShiftData,
            this.taskChangePojos = es.data.taskChangePojos,
            this.taskNumber = es.data.taskNumber,
          this.needTime = es.data.needTime
          if(String(es.data.remark) != "null"){
            this.remark = es.data.remark
          }
        })
      },

    }
  };
</script>
